<%@    page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    String webSocketPath = request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <base href="<%=basePath%>">
    <title>数据诊断页面</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is	my page">

    <link rel="stylesheet" type="text/css" href="jquery/easyui1.4.2/themes/gray/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery/easyui1.4.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="css/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/assets/css/ace.min.css"/>
    <link rel="stylesheet" href="css/assets/css/ace-rtl.min.css"/>
    <link rel="stylesheet" href="css/assets/css/ace-skins.min.css"/>

    <script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="jquery/easyui1.4.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery/easyui1.4.2/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="jquery/underscore-min.js"></script>
    <script type="text/javascript">var type = 0;</script>

    <style type="text/css">
        .btn-success,
        .btn-success:hover {
            background-color: #92c0ea !important;
            border-color: #92c0ea
        }

        .btn-success,
        .btn-success :active {
            background-color: #92c0ea !important;
            border-color: #92c0ea
        }

        .btn-success,
        .btn-success:focus {
            background-color: #92c0ea !important;
            border-color: #92c0ea
        }

        .header.green {
            border-bottom-color: #92c0ea;
        }

        .green {
            color: #92c0ea !important;
        }

        /*.widget-box {*/
        /*border-bottom: 0px;*/
        /*}*/

        .panel-body {
            padding: 0px;
        }

        input[readonly] {
            background: #ffffff !important;
            cursor: default;
        }


        table {

            /*border-collapse: collapse;*/

            font-family: Futura, Arial, sans-serif;



        }

        th,td {

            padding: .55em;

        }

        th {

            background: #7db4d8 none repeat scroll 0 0;

            border: 1px solid #7db4d8;

            border-radius:29px;
            color: #fff;
            vertical-align:bottom;

        }

        td {

            border: 1px solid #eef4f9;

        }

        tbody tr:nth-child(odd) {

            background: #eef4f9;

        }

        th:first-child {

            border-radius: 29px 0 0 0;

        }

        th:last-child {

            border-radius: 0 29px 0 0;

        }

        tr:last-child td:first-child {

            border-radius: 0 0 0 29px;

        }

        tr:last-child td:last-child {

            border-radius: 0 0 29px 0;

        }

        img{
            width: 18%;
            height:18%;
        }
    </style>
</head>

<body style="background-color:white;">
<div style="display:block;">
    <div class="widget-box" style="margin:16px 24px;padding-bottom:15px;text-align: center;">
        <div class="widget-header header-color-blue" style="border-top-left-radius:10px;border-top-right-radius:10px;">
            <h4 style="color:white;font-family: '微软雅黑'">实时故障预警</h4>
        </div>
        <div class="widget-body" style="position:relative">
            <div class="widget-main" >
                <hr>
                <table  style="width:70%;margin-left: 240px" cellpadding="6">
                    <tr>
                        <th align="center" style="width:80px"></th>
                        <th  align="center"><p align="center">通道一</p></th>
                        <th  align="center"><p align="center">通道二</p></th>
                        <th  align="center"><p align="center">通道三</p></th>
                        <th  align="center"><p align="center">通道四</p></th>
                        <th  align="center"><p align="center">通道五</p></th>
                        <th  align="center"><p align="center">通道六</p></th>
                    </tr>
                    <tr align="center" id="hang1">
                        <td class="one" id="jd1"><b>节点15</b></td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img15"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img30"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img45"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img60"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img75"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img90"/><br></div>
                        </td>
                    </tr>
                    <tr align="center">
                        <td class="one"><b>节点14</b></td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img14"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img29"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img44"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img59"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img74"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img89"/><br></div>
                        </td>
                    </tr>
                    <tr align="center">
                        <td class="one"><b>节点13</b></td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img13"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img28"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img43"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img58"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img73"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img88"/><br></div>
                        </td>
                    </tr>
                    <tr align="center">
                        <td class="one"><b>节点12</b></td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img12"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img27"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img42"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img57"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img72"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img87"/><br></div>
                        </td>
                    </tr>
                    <tr align="center">
                        <td class="one"><b>节点11</b></td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img11"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img26"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img41"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img56"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img71"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img86"/><br></div>
                        </td>
                    </tr>
                    <tr align="center">
                        <td class="one"><b>节点10</b></td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img10"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img25"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img40"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img55"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img70"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img85"/><br></div>
                        </td>
                    </tr>
                    <tr align="center">
                        <td class="one"><b>节点9</b></td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img9"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img24"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img39"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img54"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img69"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img84"/><br></div>
                        </td>
                    </tr>
                    <tr align="center">
                        <td class="one"><b>节点8</b></td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img8"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img23"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img38"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img53"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img68"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img83"/><br></div>
                        </td>
                    </tr>
                    <tr align="center">
                        <td class="one"><b>节点7</b></td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img7"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img22"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img37"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img52"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img67"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img82"/><br></div>
                        </td>
                    </tr>
                    <tr align="center">
                        <td class="one"><b>节点6</b></td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img6"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img21"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img36"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img51"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img66"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img81"/><br></div>
                        </td>
                    </tr>
                    <tr align="center">
                        <td class="one"><b>节点5</b></td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img5"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img20"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img35"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img50"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img65"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img80"/><br></div>
                        </td>
                    </tr>
                    <tr align="center">
                        <td class="one"><b>节点4</b></td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img4"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img19"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img34"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img49"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img64"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img79"/><br></div>
                        </td>
                    </tr>
                    <tr align="center">
                        <td class="one"><b>节点3</b></td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img3"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img18"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img33"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img48"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img63"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img78"/><br></div>
                        </td>
                    </tr>
                    <tr align="center">
                        <td class="one"><b>节点2</b></td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img2"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img17"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img32"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img47"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img62"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img77"/><br></div>
                        </td>
                    </tr>
                    <tr align="center">
                        <td class="one"><b>节点1</b></td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img1"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img16"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img31"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img46"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img61"/><br></div>
                        </td>
                        <td>
                            <div><img src='/WhutMonitor/img/right.png' width=25% id="img76"/><br></div>
                        </td>
                    </tr>

                </table>
            </div>
        </div>
    </div>
</div>

<script language="javascript" type="text/javascript">
    var echo_websocket;
    window.onload = function send_echo() {
        //var wsUri = "ws://localhost:8080/WhutMonitor/websocket/wsj";
        var socketPath = "<%=webSocketPath%>";
        echo_websocket = new WebSocket("ws://" + socketPath + "/websocket/wsj");
        echo_websocket.onopen = function (evt) {

        };
        echo_websocket.onmessage = function (evt) {
//            a = new Array();
            a = evt.data.split('');
            for (var i = 0; i < a.length; i++) {
                if(a[i]!='0'){
                    u = i+1;
                    imag = document.getElementById("img"+u);
                    imag.src = "/WhutMonitor/img/wrong.png";
                }else{
                    u = i+1;
                    imag = document.getElementById("img"+u);
                    imag.src = "/WhutMonitor/img/right.png";
                }
            }
            //echo_websocket.close();
        };
        echo_websocket.onerror = function (evt) {
            document.write('<span style="color: red;">ERROR:</span>' + evt.data);
            //echo_websocket.close();
        };
    }
    function doSend(message) {
        echo_websocket.send(message);
        document.write("Sent message: " + message);
    }
</script>


</body>
</html>